<template>
	<view class="body">
		<newItem v-for="item in list" :key="item.id" :content="item" @toDetail="toDetail" />
		<!-- 暂无数据 -->
		<uni-nodata v-if="list.length == 0"></uni-nodata>
		<!-- 列表下方loading -->
		<u-loadmore v-if="bottomText" :status="status" :load-text="loadText" icon-type="flower" margin-top="40" margin-bottom="40" bg-color="#f8f8f8" />
	</view>
</template>

<script>
import newItem from '../components/newItem.vue';
export default {
	components: {
		newItem
	},
	data() {
		return {
			// 数据是否加载完毕
			dataOver: false,
			// 列表下方loading
			bottomText: false,
			status: 'nomore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			// 分页参数
			params: {
				pageIndex: 0
			},
			// 数据源
			list: []
		};
	},
	onReady() {
		this.getData();
	},
	// 下啦刷新
	onPullDownRefresh() {
		this.params.pageIndex = 0;
		this.dataOver = false;
		this.bottomText = false;
		this.getData('onPullDownRefresh');
	},
	// 上拉加载
	onReachBottom() {
		// 数据加载完毕就不再加载了
		if (this.dataOver) {
			return;
		}
		++this.params.pageIndex;
		this.getData();
	},
	methods: {
		toDetail({id,messageId}) {
			uni.navigateTo({
				url: `./newDetail?id=${messageId}`,
				success: () => {
					this.$store.dispatch('readSingle', { readId:id }).then(res => {
						if (res.errorCode == 0) {
							this.list.forEach(item => {
								if (item.id == id) {
									item.read = 1;
								}
							});
						}
					});
				}
			});
		},
		getData(flag) {
			this.$store.dispatch('getMessageReadInfoPage', this.params).then(res => {
				let list = res.data.content;
				if (flag == 'onPullDownRefresh') {
					this.list = list;
					uni.stopPullDownRefresh();
				} else {
					this.list.push(...list);
				}
				// 一页数据少于10 说明加载完了
				if (list.length < 10) {
					this.dataOver = true;
					this.bottomText = true;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	padding-bottom: 20rpx;
}
</style>
